<template>
    <div class="commentContainer">
        <div class="cmtHeader">
            <h3>观点</h3>
        </div>
        <div class="cmtList">
            <ul>
                <li v-for="item in list" :key="item.id">
                    <p>
                        <span class="mui-icon mui-icon-contact"></span>
                        <span class="user">匿名用户</span>
                        <span class="add_time">{{item.add_time | dateFormat}}</span>
                    </p>
                    <p class="content">
                        {{item.content}}
                    </p>
                </li>
            </ul>
            <button type="button" class="mui-btn mui-btn-danger 
            mui-btn-block mui-btn-outlined" 
            @click="loadMoreComment">加载全部评论</button>
        </div>
        <div class="postCmt">
            <p>
                <span>发表我的观点</span>
                <span @click="postComment">发送</span>
            </p>
            <textarea class="txtMsg" rows="3" 
            placeholder="优质观点将在前排展示" v-model="msg"></textarea>
        </div>
    </div>
</template>

<script>
import {Toast} from 'mint-ui';
import qs from 'qs';

export default {
    data(){
        return{
            pageindex:1,
            pagesize:10,
            srcid:this.id,
            list:[],
            msg:'',
        };
    },
    created(){
        this.getComments();
    },
    props:[
        "id" //从父组件传递过来服务端要传递的srcid参数值
    ],
    methods:{
        //1.导入评论组件
        // 2.把comment挂载到newsinfo组件上
        // 通过
        getComments(){
            this.$http.get('http://www.barteam.cn:8086/comment',{
                params:{
                    srcid:this.id,
                    pageindex:this.pageindex,
                    pagesize:this.pagesize

                }
            }).then((res) => {
                var data = res.data;
                if(data.Status == 0){
                    if(data.Data.length > 0){
                        this.list = this.list.concat(data.Data);
                    }else{
                        Toast({
                            message:'没有更多评论了',
                            duration:3000
                        })
                    }
                }else{
                     Toast({
                            message:'请求评论失败',
                            duration:3000
                        })
                }
            })
        },
        loadMoreComment(){
            this.pageindex++;
            this.getComments();
        },
        postComment(){
            if(this.msg.length > 0){
                this.$http({
                    method:'post',
                    url:'http://www.barteam.cn:8086/comment',
                    //如果是get传参，使用params；如果是post传参，使用data属性
                    data:qs.stringify({
                        srcId:this.id,  //评论组件id
                        content:this.msg,
                        add_time:new Date(),
                    })
                }).then((res) => {
                    console.log(res);
                    //如果响应了，将新评论当作一个对象加入到数组中
                    var key = new Date().getMilliseconds();
                    this.list.unshift({id:key,content:this.msg, srcId:this.id, add_time:new Date()});
                    this.msg='';
                })
            }else{
                Toast({
                    message:'不能发表空评论',
                    duration:3000,
                    position:'bottom',
                })
            }
        }
    }
}
</script>

<style lang="less">
.commentContainer{
    .cmtHeader{
        padding: 10px 0;
        border-bottom: 1px solid #dddddd;
        h3{
            border-left: 5px solid red;
            padding-left: 10px;
            font-size: 18px;
            font-family: '微软雅黑';
            font-weight: bold;
            color:#333;

        }
    }
    .cmtList{
        ul{
            list-style:none;
            padding: 0;
            li{
                padding:0;
                margin: 0;
                border-bottom: 1px solid #ddd;
                p{
                    padding: 5px 0;
                    margin: 0;
                    font-size: 14px;
                    .user{
                        color: darkgoldenrod;
                        padding-right: 20px;
                    }
                }
                p.content{
                    padding-left:28px;
                    font-size: 16px;
                }
            }
        }
        
    }
    .postCmt{
        p{
            display: flex;
            justify-content: space-between;
            span{
                padding:5px;
            }
        }
        .txtMsg{
            color:#444;
            font-style: 14px;
        }
    }
}
</style>